<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	    <script type="text/javascript" src="tgd/Services/Google/Search.js"></script>
		<script type="text/javascript" src="tgd/Media/MediaLibrary.js"></script>
		<script type="text/javascript" src="tgd/Media/Library.js"></script>
		<script type="text/javascript" src="tgd/Media/Entry.js"></script>
		<title>Media Library</title>
		<script type="text/javascript">
			//<![CDATA[

			var _libs;
			var _ents;
			var db;

            var medlib;

			function init() {
				//todo:  load "all library" panel
				window.a = document.getElementById("lev1");
				window.b = document.getElementById("lev2");
				window.c = document.getElementById("lev3");
				window.d = document.getElementById("libRepeater");
				window.e = document.getElementById("libAdder");
				window.f = document.getElementById("editLib");
				window.g = document.getElementById("doneEditLib");
				window.h = document.getElementById("log");
				window.i = document.getElementById("entRepeater");
				window.j = document.getElementById("libName");
				window.k = document.getElementById("entAdder");
				window.l = document.getElementById("editEnt");
				window.m = document.getElementById("doneEditEnt");
				window.n = document.getElementById("entDataID");
				window.o = document.getElementById("entDataName");
				window.p = document.getElementById("entDataUPC");

				window.mode = "LIST";  //todo: enum LIST, EDIT, ETC.
				
				window.b.style.display = window.c.style.display = "none";
				
                medlib = new tgd.Media.MediaLibrary(
                    function(msg) {
                        if (msg.Status === 1) {
                            loadLibraries();
                        } else {
                            alert(msg.Message);
                        }
                    }
                );

/*
				_libs = new tgd.Services.Media.Library();
				_ents = new tgd.Services.Media.Entry();
				
				_libs.onRefresh = function () {
				
					for (var i = 0; i < _libs._data.length; ++i) {
	                    db.transaction(function(t) {
                            t.executeSql("INSERT INTO library (ID, Name) values (?, ?)", [_libs._data[i].ID, _libs._data[i].Name], function(t, data) {
                   			    _libs.log("(re)loaded all libraries (DB)");
                            });
                        });
                    }
					_libs.log("(re)loaded all libraries (CALLBACK)");
				};

				_libs.onGet = function() {
					_libs.log("GET returned data for [" + _libs.ID + "]");
					alert("ID: " + _libs.ID + "\nName: " + _libs.Name + "\nCreatedBy: " + _libs.CreatedBy + "\nDateCreated: " + _libs.DateCreated);
				};

				_libs.onPost = function() {
					_libs.log("save returned successfully, now refreshing lib list");  //should be smarter
					_libs.refresh();
				};

				_libs.onPut = function() {
					_libs.log("PUT successful [" + _libs.Name + "]  [" + _libs.ID + "]");  //should be smarter
					_libs.div.innerHTML = _libs.Name;
				};

				_libs.onDelete = function() {
					window.d.removeChild(_libs.div);
					_libs.log("DELETE library successfully deleted");
				};

				_ents.onRefresh = function() {
					window.i.innerHTML = "";

					for (var i = 0; i < _ents._data.length; ++i) {
						var div = document.createElement("div");
						div.innerHTML = '<input type="button" class="button" value="-" onclick="if (confirm(\'Delete this entry?\')) { _ents.ID = ' + _ents._data[i].ID + '; _ents.remove(); _ents.div = this.parentNode; }" /&gt;\n\t\t\t' +
							'&lt;div onclick="_ents.LibraryID = ' + _libs.ID + '; _ents.ID = ' + _ents._data[i].ID + '; _ents.get(); window.b.style.display=\'none\'; window.c.style.display=\'\';">' + 
							_ents._data[i].Name +
							'</div>';
						div.className = "viewMode";
						window.i.appendChild(div);
					}

					_ents.log("(re)loaded all entries for lib [" + _ents.LibraryID + "]");
				}

				_ents.onPost = function() {
					_ents.log("save returned successfully");
				};
				
				_ents.onDelete = function() {
					window.i.removeChild(_ents.div);
					_ents.log("DELETE entry successfully deleted");
				}
				
				_ents.onGet = function() {
					window.n.innerHTML = _ents._data.ID;
					window.o.innerHTML = _ents._data.Name;
					window.p.innerHTML = _ents._data.UPC;
				}
*/

			}

            function loadLibraries() {
                //todo: sort
                window.d.innerHTML = "";  //todo:may be a better way to do this.
                var templateLibrary = document.getElementById("templateLibrary");
                var libs = medlib.getLibraries();

                for (var i = 0; i < libs.length; ++i) {
                    var div = templateLibrary.cloneNode(true);
                    var btnDeleteLibrary = div.getElementsByClassName("btnDeleteLibrary")[0];
                    var panLibrary = div.getElementsByClassName("panLibrary")[0];
                    div.id = "";
                    panLibrary.title = libs[i].getID();
                    panLibrary.textContent = libs[i].getName();
                    libs[i].GUI = { Container : div, Name : panLibrary, Delete : btnDeleteLibrary };
                    
                    btnDeleteLibrary.onclick = function(event) {
                        if (confirm('Are you sure you want to delete this library?')) {
                            //todo: delete library and its entries.
                        }
                    }

                    panLibrary.onclick = function(event) {
                        var lib = medlib.getLibraryByID(event.target.title);
                        if (window.mode == 'LIST') {  //todo: make enumeration
                            loadEntryList(lib);
                        } else {  //edit library name
                            var newLibraryName;
                            if ((newLibraryName = prompt('Update the library name.', lib.getName())) && newLibraryName !== lib.getName()) {
                                lib.setName(newLibraryName);
                                lib.save(
                                    function(msg) {
                                        if (msg.Status === 1) {
                                            msg.Library.GUI.Name.textContent = msg.Library.getName();
                                        } else {
                                            //todo: what can i do?
                                        }
                                        alert(msg.Message);
                                    }
                                );
                            }
                        }
                    }

                    window.d.appendChild(div);
                }
            }

            function loadEntryList(library) {
                var entries = library.getEntries();
                
                if (!medlib.setCurrentLibraryID(library.getID())) {
                    alert('Unable to set the current library.');
                }

                window.i.innerHTML = "";  //todo:may be a better way to do this.
                window.j.textContent = library.getName();
                window.a.style.display = 'none';
                window.b.style.display = '';

                //todo: sort
                for (var i = 0; i < entries.length; ++i) {
                    if (entries[i].getName() !== "") {
                        createEntryRow(entries[i]);
                    }
                }
            }

            function createLibraryRow(lib) {
                //todo: move logic from loadLibraries
            }
            
            function createEntryRow(ent) {
                var templateEntry = document.getElementById("templateEntry");

                var div = templateEntry.cloneNode(true);
                var btnDeleteEntry = div.getElementsByClassName("btnDeleteEntry")[0];
                var imgEntry = div.getElementsByClassName("imgEntry")[0];
                var panEntry = div.getElementsByClassName("panEntry")[0];
                div.id = "";
                panEntry.title = ent.getUPC();
                panEntry.textContent = ent.getName();
                imgEntry.onload = function() {
                    //todo:
                }
                imgEntry.src = ent.getThumbURL();
                ent.GUI = { Container : div, Name : panEntry, Image : imgEntry, Delete : btnDeleteEntry };
                
                btnDeleteEntry.onclick = function(event) {
                    if (confirm('Are you sure you want to delete this entry?')) {
                        //todo: delete library and its entries.
                    }
                }

                panEntry.onclick = function(event) {
                    var ent = medlib.getEntryByUPC(event.target.title);
                    if (window.mode == 'LIST') {  //todo: make enumeration
                        //todo: load read/only view for entry
                    } else {
                        //todo: load edit view for entry
                    }
                }
                
                window.i.appendChild(div);
            }


			function editLibMode() {
				window.mode = "EDIT";
				window.f.style.display = 'none';
				window.e.style.display = 'none';
				window.g.style.display = '';

				for (var i = 0; i < window.d.childNodes.length; ++i) {
					window.d.childNodes[i].className = 'editMode listRow';
				}
			}

			function endEditLibMode() {
				window.mode = "LIST";
				window.g.style.display = 'none';
				window.e.style.display = '';
				window.f.style.display = '';

				for (var i = 0; i < window.d.childNodes.length; ++i) {
					window.d.childNodes[i].className = 'viewMode listRow';
				}
			}

			function editEntMode() {
				window.mode = "EDIT";
				window.l.style.display = 'none';
				window.k.style.display = 'none';
				window.m.style.display = '';

				for (var i = 0; i < window.i.childNodes.length; ++i) {
					window.i.childNodes[i].className = 'editMode listRow';
				}
			}

			function endEditEntMode() {
				window.mode = "LIST";
				window.m.style.display = 'none';
				window.k.style.display = '';
				window.l.style.display = '';

				for (var i = 0; i < window.i.childNodes.length; ++i) {
					window.i.childNodes[i].className = 'viewMode listRow';
				}
			}

			//]]>
		</script>

		<style type="text/css">
body,html{margin:0;height:100%;width:100%;background:#1C1C1C;font-family:sans-serif;}

#menu{color:#666;margin:5px 0 0 5px;}
#menu a{text-decoration:none;padding:3px 10px;margin:0 0 5px;color:#666;}
#menu a.current{background:#a4c639;color:#333;border:solid 1px #7EA600;}

#content{background:#333;}

h1{background:#a4c639;color:#333;padding:7px 0;margin:0;text-align:center;position:relative;font-size:1em;}
h1 a{text-decoration:none;color:#333;padding:5px 15px;border:solid 1px #7EA600;background:#C1DE68;}
h1 a.right,h1 a.left{position:absolute;top:1px;}
h1 a.right{right:5px;}
h1 a.left{left:5px;}

.listRow{position:relative;color:#ccc;border-bottom:solid 1px #a4c639;line-height:75px;height:75px;font-size:1.5em;overflow: hidden;}
.listRow img{height:75px;float:right;}
.listRow div{}
.listRow.editMode div{margin-left:45px;}
.listRow.viewMode div{margin-left:5px;}
.listRow.viewMode .button{display:none;}
.listRow .button{position:absolute;top:20px;bottom:20px;left:5px;background:#4D4D4D;margin:0;padding:6px;border:solid 1px #1C1C1C;color:#A4C639;font-weight:bold;font-family:consolas,monospace;line-height:1em;font-size:1em;text-decoration:none;}




#templates{display:none;}

		/*
			body,html{margin:0;height:100%;width:100%;background:#1C1C1C;font-family:sans-serif;}

			#menu{color:#666;margin:5px 0 0 5px;}
			#menu a{text-decoration:none;padding:3px 10px;margin:0 0 5px;color:#666;}
			#menu a.current{background:#a4c639;color:#333;border:solid 1px #7EA600;}

			#modeLibrary{background:#333;}

			#modeLibrary h1{background:#a4c639;color:#333;padding:7px 0;margin:0;text-align:center;position:relative;font-size:1em;}
			#modeLibrary h1 a{text-decoration:none;color:#333;padding:5px 15px;border:solid 1px #7EA600;background:#C1DE68;}

			#libAdder,#entAdder,.editMode{position:relative;}

			.viewMode,.editMode,#libAdder,#entAdder{color:#ccc;border-bottom:solid 1px #a4c639;}
			.editMode div,.viewMode div,#libAdder,#entAdder{padding:10px;padding-left:0;}

			.viewMode,.editMode{}
			.viewMode div,.editMode div{}
			.editMode div,#libAdder div,#entAdder div{margin-left:35px;}
			.viewMode div{margin-left:5px;}

			#libRepeater .editMode input,#entRepeater .editMode input,#libAdder input,#entAdder a{display:inline;position:absolute;left:5px;top:7px;}
			#libRepeater .viewMode input,#entRepeater .viewMode input{display:none;}

			#log{color:#666;border-top:dashed 5px #ccc;margin-top:1em;}
			#log div{padding:5px;border-bottom:solid 1px #a4c639;}

			input{background:#4D4D4D;margin:0;padding:2px 5px;border:solid 1px #1C1C1C;color:#A4C639;font-weight:bold;font-family:consolas,monospace;line-height:1em;font-size:.8em;}
			
			#templates{display:none;}
		*/
		</style>
	</head>
	<body id="body" onload="init();">
		<div id="menu">
			<a href="Biblio1.htm">Scan</a>
			<a href="Biblio2.htm">Uncatagorized</a>
			<a href="Biblio3.htm" class="current">My Library</a>
		</div>	
	    <div id="content">
			<div id="lev1">
				<h1>
					<a href="javascript:alert('What should this do?');">All Libs</a>
					<a id="editLib" class="right" href="javascript:editLibMode();">Edit</a>
					<a id="doneEditLib" class="right" style="display:none;" href="javascript:endEditLibMode();">Done</a>
				</h1>
				<div id="libAdder" class="editMode listRow">
					<input type="button" class="button" value="+" onclick="var temp = prompt('Enter new library name.', ''); if (temp != '') { medlib.addLibrary(new tgd.Media.Library(new Date().getTime(), temp), function(msg) { if (msg.Status === 1) { loadLibraries(); } alert(msg.Message); }); }" />
					<div>Add Lib</div>
				</div>
				<div id="libRepeater" class="repeater"></div>
			</div>
			<div id="lev2">
				<h1 style="position:relative;">
					<a id="back2Libs" class="left" href="javascript:(function(){window.b.style.display='none';window.a.style.display='';})()">&laquo;</a>
					<a id="libName" href="javascript:(function() {alert('What should clicking this do?');})()">Unknown</a>
					<a id="editEnt" class="right" href="javascript:editEntMode();">Edit</a>
					<a id="doneEditEnt" class="right" style="display:none;" href="javascript:endEditEntMode();">Done</a>
				</h1>
				<div id="entAdder" class="editMode listRow">
				    <a class="button" href="http://zxing.appspot.com/scan?ret=http://oak.cats.ohiou.edu/~td176301/javascript/1.9/Biblio1.htm?upc={CODE}&SCAN_FORMATS=UPC_A&SCAN_FORMATS=EAN_13">+</a>
					<div>Add Entry</div>
				</div>
				<div id="entRepeater" class="repeater"></div>
			</div>
			<div id="lev3">
				<h1 style="position:relative;">
					<a style="position:absolute;top:1px;left:5px;" href="javascript:(function(){window.c.style.display='none';window.b.style.display='';})()">&laquo;</a>
					<a href="javascript:(function() {alert('What should clicking this do?');})()">Edit Entry</a>
				</h1>
				<div id="editEntData" class="viewMode">
					<div>
						<b>ID:</b>
						<span id="entDataID"></span>
					</div>
					<div>
						<b>Name:</b>
						<span id="entDataName"></span>
					</div>
					<div>
						<b>UPC:</b>
						<span id="entDataUPC"></span>
					</div>
				</div>
			</div>
		</div>
		<div id="templates">
	        <div id="templateLibrary" class="viewMode listRow">
	            <input type="button" class="button btnDeleteLibrary" value="-" />
                <div class="panLibrary"></div>
            </div>
            <div id="templateEntry" class="viewMode listRow">
                <input type="button" class="button btnDeleteEntry" value="-" />
                <img class="imgEntry" />
				<div class="panEntry"></div>
			</div>
		</div>
	</body>
</html>
